<template>
  <div class="login-container">
      <div class="imgBox">
              <div class="login_png">
                </div>
      </div>
    
    <div class="login_content">
          
          <div class="login-div">
            <!-- <p class="project_title">港华码头生产管理系统</p> -->
            <div class="logo_title"></div>
            <!-- <p class="project_title">智能生产综合管控平台</p> -->
            <el-form
              ref="formRef"
              :model="form"
              class="login-form"
              :rules="rules"
              :label-position="left"
              style="max-width: 600px"
            >
              <div class="title-container">
                <h3 class="title">智能生产综合管控平台</h3>
              </div>
              <el-form-item prop="username">
                <p class="userTitle">账号</p>
                <el-input
                  class="w-50 m-2"
                  v-model="form.username"
                  :prefix-icon="avatar"
                  placeholder="账号"
                  maxlength="50"
                ></el-input>
              </el-form-item>
              <el-form-item prop="password">
                <p class="userTitle">密码</p>
                <el-input
                  class="w-50 m-2"
                  :type="passwordType"
                  v-model="form.password"
                  :prefix-icon="lock"
                  placeholder="密码"
                  show-password
                  maxlength="50"
                ></el-input>
              </el-form-item>
              <el-form-item prop="code" class="codeInput">
                <p class="userTitle">验证码</p>
                <el-input
                        class="w-50 m-2 "
                        v-model="form.code"
                        :prefix-icon="DocumentRemove"
                        placeholder="验证码"
                        clearable
                        maxlength="50"
                        ></el-input>
                <img :src= "form.codeImg"  width="140" height="48" style="border-radius: 8px;margin-left: 16px;" alt="无法显示" @click="getcode" />
                <!-- <span><el-image
                                                                        style="width: 28px; height: 28px"
                                                                        :src="code.value"
                                                                        :zoom-rate="1.2"
                                                                        :max-scale="7"
                                                                        :min-scale="0.2"
                                                                        :initial-index="4"
                                                                        fit="cover"
                                                                        /> </span> -->
              </el-form-item>
              <el-button type="primary" class="login-button mt-16" @click="handleLogin" :disabled = 'isdisabled'
                >登录</el-button
              >
              <p class="remark_content">忘记密码请联系管理员找回</p>
              <el-checkbox v-model="checked1" label="记住密码"  />
            </el-form>
            <p class="footer_content mt-16">山东省港口集团滨州港有限公司</p>
            <!-- <p class="footer_content mt-16">山东沂蒙大数据科技有限公司</p> -->
          </div>
    </div>

    
  </div>
</template>
<script setup>
import { ref, getCurrentInstance, onMounted, onUnmounted, onBeforeMount } from "vue";
import { ElMessage, ElMessageBox,ElNotification } from "element-plus";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { Avatar, Lock } from "@element-plus/icons-vue";
import { getVerifyCode  as getVerifyCode, examineVcode as examineVcode} from "@/api/user.js"
const store = useStore();
const { proxy } = getCurrentInstance();
const isdisabled =  ref(false)
let form = ref({
  username: "",
  password: "",
  code:"",
  codeImg:'',
  num:''
});
const checked1 = ref(false);
const rules = ref({
  username: [
    {
      required: true,
      message: "请输入账号",
      trigger: "blur",
    },
  ],
  password: [
    {
      required: true,
      message: "请输入密码",
      trigger: "blur",
    },
  ],
   code:[
      {
      required: true,
      message: "请输入验证码",
      trigger: "blur",
    },
  ]
});
const router = useRouter();
const formRef = ref(null);
const avatar = ref(Avatar);
const lock = ref(Lock);
const passwordType = ref("password");
const  generateRandomFiveDigitNumber =()=> {
  const randomNumber = Math.floor(Math.random() * 100000);
  const formattedNumber = String(randomNumber).padStart(5, '0');
  return formattedNumber;
}

const code = ref("")
const getcode =()=>{
    form.value.num = generateRandomFiveDigitNumber()
    let obj = {
        "vCodeId":form.value.num
        }
    getVerifyCode(obj).then((res)=>{
        if(res.code === 200){
            // dialogData.formData.equipmentQrCode = 'data:image/png;base64,'+dialogData.formData.equipmentQrCode
            form.value.codeImg =  'data:image/png;base64,'+res.body.vCodeStr64
            console.log(form.codeImg)
        }else{
             ElNotification({
              title: '提示',
              message: res.message?res.message:'服务器异常',
              type: 'warning',
            })
            if(res.code === 100007 ||  res.code === 100008 ||  res.code === 100011){
                    store.dispatch('app/logout')
                }
        }
    })
}
onBeforeMount(()=>{
    getcode()
})
onMounted(() => {
  getaccount(); //获取cookie的方法
  window.addEventListener('keydown',keydown)

});
const keydown = (e)=>{
  if(e.keyCode === 13){
    handleLogin()
  }
}
onUnmounted(()=>{
  window.removeEventListener('keydown', keydown, false)
})
const getaccount = () => {
  if (document.cookie.length >= 0) {
    form.value.username = getCookie("mobile");
    form.value.password = getCookie("password");
    checked1.value = true;
    console.log(form.username);
  }
};
const setCookie = (c_name, c_pwd, exdate) => {
  //账号，密码 ，过期的天数

  let date = new Date();

  console.log(c_name, c_pwd);

  date.setTime(date.getTime() + 24 * 60 * 60 * 1000 * exdate); //保存的天数

  document.cookie =
    "mobile=" + c_name + ";path=/;expires=" + date.toLocaleString();

  document.cookie =
    "password=" + c_pwd + ";path=/;expires=" + date.toLocaleString();
};

const getCookie = (name) => {
  var arr = document.cookie.split(";");

  //["_ga=GA1.1.1756734561.1561034020", " mobile=123" password=456"]

  for (var i = 0; i < arr.length; i++) {
    var arr2 = arr[i].split("="); // ["_ga", "GA1.1.1756734561.1561034020"]

    if (arr2[0].trim() == name) {
      return arr2[1];
    }
  }
};

const clearCookie = () => {
  setCookie("", "", -1); //清除cookie
};
const handleLogin = () => {
  console.log(store)
  isdisabled.value = true;
  formRef.value.validate(async (valid) => {
    if (valid) {
      console.log(form.value.username);
      if (checked1.value) {
        setCookie(form.value.username, form.value.password, 7);
      } else {
        clearCookie();
      }

      let obj = {
        username: form.value.username,
        password: proxy.$md5(
          form.value.password
        ),
        // password: form.value.password,
        codeText:form.value.code,
        vCodeId:form.value.num,
      };
      examineVcode(obj).then((res)=>{
          if(res.code ===200){
           store.dispatch("app/login", obj);
        }else{
            // form.value.validate()
            ElNotification({
                title: '提示',
                message: res.message?res.message:'服务器异常',
                type: 'warning',
            })
            if(res.code === 100007 ||  res.code === 100008 ||  res.code === 100011){
                    store.dispatch('app/logout')
                }
        }
      })
      setTimeout(()=>{
        isdisabled.value = false;
      },5000);
    } else {
      console.log("error submit!!");
      return false;
    }
  });
};
</script>

<style lang="less" scoped>
@bg: #2d3a4b;
@dark_gray: #889aa4;
@light_gray: #eee;
@cursor: #fff;

.login-container {
    height:100%;
    width:100%;
    overflow: hidden;
    margin: 0;
    display: flex;
    :deep(.el-input__wrapper) {
      display: flex;
      background-color: transparent;
      width: 100%;
    }
    :deep(.el-form-item__content){
      display: block;
    }
    :deep(.el-input){
      width: 100%;
    }
    :deep(.el-button){
      width: 100%;
      background-color: #2E83FC;
    }
    .login_content{
      position: relative;
      width: 628px;
      .logo_title{
        // position: absolute;
        width: 223px;
        height: 75px;
        // background: url(../../assets/image/logotitle01.png) no-repeat;
        background: url(../../assets/image/333.png) no-repeat;
        background-size:100% 100%;
        margin-left: 100px;
      }
      .login-div{
        position: absolute;
        width: 450px;
        height: 578px;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
      }
      .login-form{
        width: 450px;
        height: 503px;
        background-color: #ffffff;
        border: 1px solid #c2c8cf;
        border-radius: 8px;
        box-shadow: 0px 0px 32px 0px rgba(46,131,252,0.16);
        padding: 48px 64px;
      }
    }

  .tips {
    font-size: 16px;
    line-height: 28px;
    color: #fff;
    margin-bottom: 10px;

    span {
      &:first-of-type {
        margin-right: 16px;
      }
    }
  }

  .svg-container {
    padding: 6px 5px 6px 15px;
    color: @dark_gray;
    vertical-align: middle;
    display: inline-block;
  }

  .title-container {
    position: relative;
    .title {
    font-size: 32px;
    color: #000000;
    margin: 0px auto 32px auto;
    font-weight: bold;
    }

    :deep(.lang-select) {
      position: absolute;
      top: 4px;
      right: 0;
      background-color: white;
      font-size: 22px;
      padding: 4px;
      border-radius: 4px;
      cursor: pointer;
    }
  }

  .show-pwd {
    font-size: 16px;
    color: @dark_gray;
    cursor: pointer;
    user-select: none;
  }
  .imgBox{
       min-height: 100vh;
      padding: 56px;
      width: calc(100% - 628px);
  }
  .login_png{
   width: 100%;
   height: 100%;
    background: url(../../assets/image/login/loginpng.png) no-repeat;
  //   background-size: cover;
    background-size:100% 100%;
    
    
    
  }
  .remark_content{
    font-size: 12px;
    color: #797F89;
    margin-top: 8px;
  }
  :deep(.el-checkbox__label){
    font-size: 12px;
  }
  .footer_content{
    font-size: 14px;
    font-family: Microsoft YaHei UI, Microsoft YaHei UI-400;
    font-weight: 400;
    text-align: CENTER;
    color: #4b515b;
  }
  .project_title{
    font-size: 32px;
    color: #000000;
    margin-bottom: 24px;
    text-align: center;
    font-weight: 700;
  }
}
.codeInput{
        :deep(.el-input){
            width: calc(100% - 156px);
        }
    }
</style>
